<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站动态推荐</title>
    
    <!-- 引入所需的CDN文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #e0e7ff;
            --secondary: #64748b;
            --light: #f8fafc;
            --dark: #1e293b;
            --shadow: 0 4px 12px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }
        
        body {
            background-color: #f1f5f9;
            color: var(--dark);
        }
        
        .post-card {
            transition: var(--transition);
            border-radius: 12px;
            overflow: hidden;
            background-color: white;
            border: none;
            box-shadow: var(--shadow);
        }
        
        .post-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }
        
        .user-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .post-image {
            width: 100%;
            height: auto;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .post-card:hover .post-image {
            filter: brightness(1.03);
        }
        
        .multi-image-grid {
            display: grid;
            gap: 4px;
        }
        
        .multi-image-2 {
            grid-template-columns: 1fr 1fr;
        }
        
        .multi-image-3 {
            grid-template-columns: 1fr 1fr;
        }
        
        .multi-image-3 img:last-child {
            grid-column: span 2;
        }
        
        .multi-image-4 {
            grid-template-columns: 1fr 1fr;
        }
        
        .post-actions {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-top: 1px solid #f1f5f9;
            margin-top: 12px;
        }
        
        .action-btn {
            color: var(--secondary);
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.9rem;
            padding: 4px 8px;
            border-radius: 6px;
            transition: var(--transition);
        }
        
        .action-btn:hover {
            background-color: var(--light);
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: #ef4444;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--secondary);
        }
        
        .post-caption {
            line-height: 1.5;
        }
        
        .tag {
            display: inline-block;
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 12px;
            background-color: var(--primary-light);
            color: var(--primary);
            margin-right: 6px;
            margin-bottom: 6px;
        }
        
        .comment-item {
            padding: 8px 0;
            border-top: 1px solid #f1f5f9;
        }
        
        .comment-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-text {
            background-color: var(--light);
            padding: 8px 12px;
            border-radius: 16px;
            font-size: 0.9rem;
        }
        
        .view-more {
            color: var(--primary);
            background: none;
            border: none;
            font-size: 0.9rem;
            padding: 4px 0;
            cursor: pointer;
        }
        
        .add-comment {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f1f5f9;
        }
        
        .add-comment input {
            flex: 1;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .add-comment input:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .layout-tabs .nav-link {
            color: var(--secondary);
            border: none;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            padding: 0.5rem 1rem;
            font-weight: 500;
        }
        
        .layout-tabs .nav-link.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            background: transparent;
        }
    </style>
</head>
<body>
    <div class="container mt-4 mb-10">
        <h2 class="text-primary fw-bold mb-5">推荐动态</h2>
        
        <!-- 布局切换 -->
        <ul class="nav layout-tabs mb-6" id="layoutTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="standard-layout-tab" data-bs-toggle="tab" 
                        data-bs-target="#standard-layout" type="button" role="tab" 
                        aria-controls="standard-layout" aria-selected="true">
                    <i class="fas fa-th-large me-2"></i>标准布局
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="compact-layout-tab" data-bs-toggle="tab" 
                        data-bs-target="#compact-layout" type="button" role="tab" 
                        aria-controls="compact-layout" aria-selected="false">
                    <i class="fas fa-compress me-2"></i>紧凑布局
                </button>
            </li>
        </ul>
        
        <!-- 动态内容区域 -->
        <div class="tab-content" id="layoutTabsContent">
            <!-- 标准布局 -->
            <div class="tab-pane fade show active" id="standard-layout" role="tabpanel" aria-labelledby="standard-layout-tab">
                <div class="row gap-4">
                    <!-- 无图动态 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="post-card p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
                                    <div>
                                        <h5 class="mb-0 fw-semibold">张明</h5>
                                        <span class="post-time">2小时前</span>
                                    </div>
                                </div>
                                <button class="btn btn-sm text-secondary">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            
                            <div class="post-content mb-3">
                                <p class="post-caption">
                                    刚刚完成了三个月的项目，终于上线了！感谢团队所有人的努力，特别感谢@李华 熬夜解决的技术难题。接下来可以好好休息一下了🎉
                                </p>
                                <div class="mt-2">
                                    <span class="tag">#项目上线</span>
                                    <span class="tag">#团队合作</span>
                                </div>
                            </div>
                            
                            <div class="post-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>128</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-comment"></i>
                                    <span>32</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单图动态 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="post-card p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="user-avatar">
                                    <div>
                                        <h5 class="mb-0 fw-semibold">李婷</h5>
                                        <span class="post-time">昨天 15:30</span>
                                    </div>
                                </div>
                                <button class="btn btn-sm text-secondary">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            
                            <div class="post-content mb-3">
                                <p class="post-caption mb-3">
                                    周末去了这家新开的咖啡馆，环境真的超赞，咖啡也很正宗，推荐给大家☕️
                                </p>
                                <div class="rounded-2xl overflow-hidden mb-2">
                                    <img src="https://picsum.photos/600/400?random=10" alt="咖啡馆照片" class="post-image">
                                </div>
                                <div class="mt-2">
                                    <span class="tag">#咖啡</span>
                                    <span class="tag">#周末探店</span>
                                </div>
                            </div>
                            
                            <div class="post-actions">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>256</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-comment"></i>
                                    <span>48</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 双图动态 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="post-card p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="user-avatar">
                                    <div>
                                        <h5 class="mb-0 fw-semibold">王浩</h5>
                                        <span class="post-time">3天前</span>
                                    </div>
                                </div>
                                <button class="btn btn-sm text-secondary">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            
                            <div class="post-content mb-3">
                                <p class="post-caption mb-3">
                                    徒步旅行的第二天，看到了壮丽的日出和清澈的湖泊，大自然太美了！
                                </p>
                                <div class="multi-image-grid multi-image-2 rounded-2xl overflow-hidden mb-2">
                                    <img src="https://picsum.photos/300/300?random=11" alt="日出景色" class="post-image">
                                    <img src="https://picsum.photos/300/300?random=12" alt="湖泊景色" class="post-image">
                                </div>
                                <div class="mt-2">
                                    <span class="tag">#徒步</span>
                                    <span class="tag">#自然风光</span>
                                </div>
                            </div>
                            
                            <div class="post-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>342</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-comment"></i>
                                    <span>56</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 三图动态 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="post-card p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="user-avatar">
                                    <div>
                                        <h5 class="mb-0 fw-semibold">陈静</h5>
                                        <span class="post-time">1周前</span>
                                    </div>
                                </div>
                                <button class="btn btn-sm text-secondary">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            
                            <div class="post-content mb-3">
                                <p class="post-caption mb-3">
                                    在家尝试做了三道菜，都是第一次做，味道竟然还不错！看来我有点烹饪天赋😉
                                </p>
                                <div class="multi-image-grid multi-image-3 rounded-2xl overflow-hidden mb-2">
                                    <img src="https://picsum.photos/300/200?random=13" alt="炒菜" class="post-image">
                                    <img src="https://picsum.photos/300/200?random=14" alt="汤品" class="post-image">
                                    <img src="https://picsum.photos/604/200?random=15" alt="主食" class="post-image">
                                </div>
                                <div class="mt-2">
                                    <span class="tag">#美食</span>
                                    <span class="tag">#家常菜</span>
                                    <span class="tag">#烹饪</span>
                                </div>
                            </div>
                            
                            <div class="post-actions">
                                <button class="action-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>189</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-comment"></i>
                                    <span>27</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 四图动态 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="post-card p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="https://picsum.photos/200/200?random=5" alt="用户头像" class="user-avatar">
                                    <div>
                                        <h5 class="mb-0 fw-semibold">赵强</h5>
                                        <span class="post-time">2周前</span>
                                    </div>
                                </div>
                                <button class="btn btn-sm text-secondary">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            
                            <div class="post-content mb-3">
                                <p class="post-caption mb-3">
                                    公司团建去了主题乐园，玩了过山车、摩天轮，还看了精彩的表演，太开心了！
                                </p>
                                <div class="multi-image-grid multi-image-4 rounded-2xl overflow-hidden mb-2">
                                    <img src="https://picsum.photos/300/300?random=16" alt="过山车" class="post-image">
                                    <img src="https://picsum.photos/300/300?random=17" alt="摩天轮" class="post-image">
                                    <img src="https://picsum.photos/300/300?random=18" alt="表演" class="post-image">
                                    <img src="https://picsum.photos/300/300?random=19" alt="团队合影" class="post-image">
                                </div>
                                <div class="mt-2">
                                    <span class="tag">#团建</span>
                                    <span class="tag">#主题乐园</span>
                                </div>
                            </div>
                            
                            <div class="post-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>215</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-comment"></i>
                                    <span>33</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 带评论的动态 -->
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="post-card p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="https://picsum.photos/200/200?random=6" alt="用户头像" class="user-avatar">
                                    <div>
                                        <h5 class="mb-0 fw-semibold">林小</h5>
                                        <span class="post-time">3周前</span>
                                    </div>
                                </div>
                                <button class="btn btn-sm text-secondary">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                            
                            <div class="post-content mb-3">
                                <p class="post-caption mb-3">
                                    新买的相机终于到了，迫不及待出去拍了几张，大家觉得这组照片怎么样？求摄影大神指点🙏
                                </p>
                                <div class="rounded-2xl overflow-hidden mb-3">
                                    <img src="https://picsum.photos/600/400?random=20" alt="摄影作品" class="post-image">
                                </div>
                                <div class="mt-2">
                                    <span class="tag">#摄影</span>
                                    <span class="tag">#新设备</span>
                                </div>
                                
                                <!-- 评论区 -->
                                <div class="comments mt-4">
                                    <div class="comment-item d-flex gap-2">
                                        <img src="https://picsum.photos/200/200?random=7" alt="评论用户头像" class="comment-avatar">
                                        <div>
                                            <div class="comment-text">构图很棒，色彩也很舒服，请问用的是什么镜头？</div>
                                            <div class="d-flex gap-2 mt-1">
                                                <span class="post-time">2周前</span>
                                                <button class="text-secondary btn btn-sm p-0">回复</button>
                                                <button class="text-secondary btn btn-sm p-0">❤️ 12</button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <button class="view-more">查看全部18条评论</button>
                                </div>
                                
                                <!-- 评论输入框 -->
                                <div class="add-comment">
                                    <img src="https://picsum.photos/200/200?random=8" alt="当前用户头像" class="comment-avatar">
                                    <input type="text" placeholder="添加评论...">
                                    <button class="text-primary btn btn-sm p-0">发送</button>
                                </div>
                            </div>
                            
                            <div class="post-actions">
                                <button class="action-btn">
                                    <i class="far fa-heart"></i>
                                    <span>421</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-comment"></i>
                                    <span>18</span>
                                </button>
                                <button class="action-btn">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 紧凑布局 -->
            <div class="tab-pane fade" id="compact-layout" role="tabpanel" aria-labelledby="compact-layout-tab">
                <div class="row gap-3">
                    <!-- 紧凑无图动态 -->
                    <div class="col-12">
                        <div class="post-card p-3">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar" style="width: 40px; height: 40px;">
                                <div class="flex-1 min-w-0">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-0 fw-semibold">张明</h6>
                                            <span class="post-time">2小时前</span>
                                        </div>
                                        <button class="btn btn-sm text-secondary p-1">
                                            <i class="fas fa-ellipsis-h"></i>
                                        </button>
                                    </div>
                                    <p class="post-caption mt-1 mb-2 text-sm">
                                        刚刚完成了三个月的项目，终于上线了！感谢团队所有人的努力...
                                    </p>
                                    <div class="d-flex flex-wrap">
                                        <span class="tag">#项目上线</span>
                                        <span class="tag">#团队合作</span>
                                    </div>
                                    <div class="post-actions mt-2">
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-heart"></i>
                                            <span>128</span>
                                        </button>
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-comment"></i>
                                            <span>32</span>
                                        </button>
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-share-square"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 紧凑单图动态 -->
                    <div class="col-12">
                        <div class="post-card p-3">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="user-avatar" style="width: 40px; height: 40px;">
                                <div class="flex-1 min-w-0">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-0 fw-semibold">李婷</h6>
                                            <span class="post-time">昨天 15:30</span>
                                        </div>
                                        <button class="btn btn-sm text-secondary p-1">
                                            <i class="fas fa-ellipsis-h"></i>
                                        </button>
                                    </div>
                                    <p class="post-caption mt-1 mb-2 text-sm">
                                        周末去了这家新开的咖啡馆，环境真的超赞，咖啡也很正宗，推荐给大家☕️
                                    </p>
                                    <div class="rounded-xl overflow-hidden mb-2" style="max-width: 200px; float: left; margin-right: 10px;">
                                        <img src="https://picsum.photos/400/300?random=10" alt="咖啡馆照片" class="post-image">
                                    </div>
                                    <div class="d-flex flex-wrap">
                                        <span class="tag">#咖啡</span>
                                        <span class="tag">#周末探店</span>
                                    </div>
                                    <div class="post-actions mt-2 clear-both">
                                        <button class="action-btn liked" style="font-size: 0.8rem;">
                                            <i class="fas fa-heart"></i>
                                            <span>256</span>
                                        </button>
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-comment"></i>
                                            <span>48</span>
                                        </button>
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-share-square"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 紧凑四图动态 -->
                    <div class="col-12">
                        <div class="post-card p-3">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/200/200?random=5" alt="用户头像" class="user-avatar" style="width: 40px; height: 40px;">
                                <div class="flex-1 min-w-0">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-0 fw-semibold">赵强</h6>
                                            <span class="post-time">2周前</span>
                                        </div>
                                        <button class="btn btn-sm text-secondary p-1">
                                            <i class="fas fa-ellipsis-h"></i>
                                        </button>
                                    </div>
                                    <p class="post-caption mt-1 mb-2 text-sm">
                                        公司团建去了主题乐园，玩了过山车、摩天轮，还看了精彩的表演，太开心了！
                                    </p>
                                    <div class="multi-image-grid multi-image-4 rounded-xl overflow-hidden mb-2" style="max-width: 300px; float: left; margin-right: 10px;">
                                        <img src="https://picsum.photos/150/150?random=16" alt="过山车" class="post-image">
                                        <img src="https://picsum.photos/150/150?random=17" alt="摩天轮" class="post-image">
                                        <img src="https://picsum.photos/150/150?random=18" alt="表演" class="post-image">
                                        <img src="https://picsum.photos/150/150?random=19" alt="团队合影" class="post-image">
                                    </div>
                                    <div class="d-flex flex-wrap">
                                        <span class="tag">#团建</span>
                                        <span class="tag">#主题乐园</span>
                                    </div>
                                    <div class="post-actions mt-2 clear-both">
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-heart"></i>
                                            <span>215</span>
                                        </button>
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-comment"></i>
                                            <span>33</span>
                                        </button>
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-share-square"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 紧凑带评论动态 -->
                    <div class="col-12">
                        <div class="post-card p-3">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/200/200?random=6" alt="用户头像" class="user-avatar" style="width: 40px; height: 40px;">
                                <div class="flex-1 min-w-0">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h6 class="mb-0 fw-semibold">林小</h6>
                                            <span class="post-time">3周前</span>
                                        </div>
                                        <button class="btn btn-sm text-secondary p-1">
                                            <i class="fas fa-ellipsis-h"></i>
                                        </button>
                                    </div>
                                    <p class="post-caption mt-1 mb-2 text-sm">
                                        新买的相机终于到了，迫不及待出去拍了几张，大家觉得这组照片怎么样？求摄影大神指点🙏
                                    </p>
                                    <div class="rounded-xl overflow-hidden mb-2" style="max-width: 150px; float: left; margin-right: 10px;">
                                        <img src="https://picsum.photos/300/200?random=20" alt="摄影作品" class="post-image">
                                    </div>
                                    <div class="d-flex flex-wrap">
                                        <span class="tag">#摄影</span>
                                        <span class="tag">#新设备</span>
                                    </div>
                                    
                                    <!-- 紧凑评论 -->
                                    <div class="comments mt-2">
                                        <div class="comment-item d-flex gap-2">
                                            <img src="https://picsum.photos/200/200?random=7" alt="评论用户头像" class="comment-avatar" style="width: 28px; height: 28px;">
                                            <div>
                                                <div class="comment-text text-sm">构图很棒，色彩也很舒服</div>
                                                <div class="d-flex gap-2 mt-0 text-xs">
                                                    <span class="post-time">2周前</span>
                                                    <button class="text-secondary btn btn-sm p-0">回复</button>
                                                </div>
                                            </div>
                                        </div>
                                        <button class="view-more text-sm">查看全部18条评论</button>
                                    </div>
                                    
                                    <div class="post-actions mt-2 clear-both">
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-heart"></i>
                                            <span>421</span>
                                        </button>
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-comment"></i>
                                            <span>18</span>
                                        </button>
                                        <button class="action-btn" style="font-size: 0.8rem;">
                                            <i class="far fa-share-square"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center mt-6">
            <button class="btn btn-outline-primary px-6 py-2 rounded-full hover:bg-primary hover:text-white transition-all">
                加载更多动态 <i class="fas fa-chevron-down ms-2"></i>
            </button>
        </div>
    </div>

    <script>
        // 初始化布局切换
        const layoutTabs = new bootstrap.Tab('#layoutTabs');
        
        // 点赞功能
        document.querySelectorAll('.action-btn').forEach(btn => {
            if (btn.querySelector('.far.fa-heart') || btn.querySelector('.fas.fa-heart')) {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countEl = this.querySelector('span');
                    let count = parseInt(countEl.textContent);
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        countEl.textContent = count + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        countEl.textContent = count - 1;
                    }
                });
            }
        });
        
        // 加载更多功能
        document.querySelector('.btn-outline-primary').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '加载更多动态 <i class="fas fa-chevron-down ms-2"></i>';
                // 实际应用中这里会添加新的动态内容
            }, 1500);
        });
    </script>
</body>
</html>
    
